<template>
  <div>
    <h1>App</h1>
    <!-- 
      给DOM元素绑定v-model，内部： 
        1. 绑定元素value属性，值为表达式的值
        2. 给元素绑定input事件，当用户输入数据时，会触发input事件，
          收集到用户输入的数据（e.target.value），更新data数据
    -->
    <input type="text" v-model="count" />
    <!-- 
      给组件绑定v-model, 内部
        1. 给组件以props方式传递一个value属性，值为表达式的值
        2. 给组件绑定一个自定义事件，事件名：input
           触发事件传入的参数，就会更新data的值

      给组件绑定的所有事件，都是自定义事件
      需求: 想要给组件绑定原生DOM事件，怎么办？
      .native会绑定原生DOM事件（给组件最外层元素绑定事件）
     -->
    <Child v-model="count" age="18" />
    <!-- <Child v-model="count" @click.native="count++" /> -->
  </div>
</template>

<script>
import Child from "./Child";

export default {
  name: "App",
  data() {
    return {
      count: 0,
    };
  },
  components: {
    Child,
  },
};
</script>

<style></style>
